<template>
  <el-drawer
    title="我是标题"
    size="70%"
    :visible.sync="visible"
    :with-header="false"
  >
    <div style="width:100%;height:100vh;overflow:auto" v-loading="loading">
      <el-card class="box-card" shadow="naver">
        <el-table
          :data="form.parameters"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          size="mini"
        >
          <el-table-column label="Permission" width="150" align="center">
            <template slot-scope="scope">
              <el-checkbox
                label="公开"
                :disabled="true"
                v-model="scope.row.isPublic"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="IsRequired"
            prop="order"
            width="95"
          >
            <template slot-scope="scope">
              <el-checkbox
                label="必填"
                :disabled="true"
                v-model="scope.row.required"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="Name" width="150" align="center">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column label="Value">
            <template slot-scope="scope">
              <el-input
                :disabled="!scope.row.isPublic"
                type="textarea"
                size="mini"
                v-model="scope.row.value"
              ></el-input>
              <p style="font-size:12px;color:#999999">
                {{scope.row.description}}
              </p>
            </template>
          </el-table-column>
        </el-table>
        <br />
        <el-row>
          <el-button type="primary" @click="execute">执行</el-button>
        </el-row>
      </el-card>
      <br />
      <el-card class="box-card" shadow="naver">
        <div style="padding:10px;">
          <el-input
           :readonly="true"
            type="textarea"
            size="mini"
            autosize
            :value="executeResult"
          ></el-input>
        </div>
      </el-card>
    </div>
  </el-drawer>
</template>

<script>
import resourceApi from "@/api/resource";
export default {
  props: {
    value: {
      id: 1
    }
  },
  watch: {
    value: {
      handler() {
        this.load();
      },
      deep: true
    },
    visible(newVal, oldVal) {
      if (!newVal && oldVal) this.hide();
    },
  },
  model: {
    prop: "value",
    event: "change"
  },
  data() {
    return {
      loading: false,
      visible: false,
      defaultLabelWidth: "150px",
      form: {
        id: "",
        parameters: [
          {
            name: "",
            isPublic: true,
            required: true,
            value: ""
          }
        ]
      },
      executeResult: "",
      rules: {
        name: [{ required: true, message: "请输入", trigger: "change" }]
      }
    };
  },
  methods: {
    confirm() {
      this.commit();
    },
    show(value) {
      this.visible = true;
      if (value) this.loadData(value);
    },
    hide() {
      this.visible = false;
      this.form = {
        id: "",
        parameters: [
          {
            name: "",
            isPublic: true,
            required: true,
            value: ""
          }
        ]
      };
    },
    loadData(value) {
      this.loading = true;
      Object.keys(value).forEach(key => {
        this.form[key] = value[key];
      });

      this.executeResult = "";
      this.$store
        .dispatch("middleware/get", this.form.id)
        .then(res => {
          res.cover = res.cover || {};
          res.middleware = res.middleware || {};
          res.parameters = res.parameters || [];
          debugger;
          this.form = res;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    commit() {},
    execute() {
      this.loading = true;
      this.executeResult = "";
      this.$store
        .dispatch("middleware/execute", this.form)
        .then(res => {
          this.loading = false;
          this.executeResult = res;
        })
        .catch(() => {
          this.loading = false;
        });
    }
  }
};
</script>

<style></style>
